滴滴这个页面，设计有失水准了
The following article is from Two Young设计笔记 Author younger.
# 为什么我要搞TA！
最近国内油价这是一涨再涨，每次油少就焦虑，这不我又来加油啦~因为加油滴滴比较优惠，平常用得多一些。
所以关注滴滴加油页面存在的一些问题，今天对这个页面在原有的功能和逻辑做一些视觉和交互上的优化。如有不足，请大家多多指证。
我们先看下这个页面到底长啥样，竟让我这么不喜欢？
从上图可看出，油站列表进来，就是上图最左边默认的页面，页面标题叫“订单确认”，基本链路为：选择油枪-选择油号-选择(或输入)金额，会出现优惠信息-选择优惠券-去支付-完成。
从表面上看好像没啥大毛病，听我下面细细说来。
# "七罪" 难平我心头之 "恨"
页面名称叫“确认订单”，其实就很懵逼。我还没下单呢，确认订单是什么意思？
最右侧的页面，当时不知道怎么操作的，页面标题变成优惠券，可能是bug，后来操作没出现。
油站信息下面的“#95”油号，显示对应的油价信息，当切换对应的油号，下面“我要加油”对应的油耗选择也变动了，这是什么逻辑？可能我只是看看不同油号的价格详情而已，并非加油时就是刚切换的油号。
油站信息在上方，而“油站详情”却在下面和“我要加油”同一个tab层级，这是什么逻辑？而且我看“团油”App也是这么做，感觉互相抄了个寂寞。
因为“选择油枪号”和选择“油号”是联动的，当点击“选择油枪号”弹出的弹层，先选的是油号？且油号选择用左右tab展示，在对应油号选择下方展示对应油枪号，一定要选油枪，如果选择了油号，没有选择油枪，就没办法确定。可以说很懵逼好么
加油优惠券的“限时优惠”这条，每次都不知道怎么点(上图最左图)，存在的意义其实并不大。
“合计优惠”和“已优惠”，为什么要用两个不同的表达方式迷惑用户？其实是同一个东西。
# 且看我如何搞TA！
加油链路优化
进入油站—>选择油号—>选择油枪—>选择优惠—>去付款
信息层级规划和调整
A.提升评分层级，增强用户信任感
B.调整油站详情和油站基本信息融合，使页面逻辑更顺畅
C.油号和油枪选择拆分，分别选择
D.优惠模块信息整合
品牌融入
A.品牌色的适用
B.场景化的融合
加强优惠信息的引导
A.优惠券在优惠模块中引导
B.优惠券在按钮上方气泡的强引导
第一招，且用三层功力：
其实这个方案梳理了以上存在的问题，做了重新排列组合，把相近的内容整合放在同一个模块，比如：
1.油站评价和评分整合到顶部和油站名称同一个模块；
2.加油号和对应价格信息；
3.优惠券整合等；
这样调整使页面结构更加清晰。
另外，加入品牌色的融入，作为页面头部背景，使页面更加沉稳。
点击可看大图 ↑↑
做完后发现，页面还是不太好，主要是没什么特点，页面比较普通，且页面还有优化空间，请继续往下看。
第二招，用五层功力：
1.在上述方案的基础上，做了通过对油站评分的强化，标签化凸显油站高评分，优评价，增强用户对于油站的好感度和信任度；
2.在按钮上方增加优惠券等权益的气泡提示，更好地引导用户，可提升转化。
点击可看大图 ↑↑
这个方案做完发现，还是感觉不太合适：
1.浅色的背景反而没有第一个方案稳重，评分位置和长油站名称会重叠；
2.页面显得比较平淡，比较难吸引用户；
3.优惠券的使用，是引导去开通会员才能使用，对于一些不太喜欢开会员的用户比较难接受，不想开会员，会流失一部分用户。
第三招，八层功力 放大招：
1.增加油站场景图片信息，让每一个油站有独立形象，具有品牌感；
2.放大油站评分占比，减少用户选择油站决策时间；
3.强化优惠券引导：优惠券的使用调整为“立即使用”，从文案表达上减少用户开会员的心理负担；
4.优惠券链路的优化：点击按钮以及上的气泡后，将跳转至支付页面，支付页面带出开通会员的信息，支付成功即开通会员，从操作上减少用户操作，从业务上提升会员开通转化，提升用户体验。
点击可看大图 ↑↑
# 最后总结
设计的最终目的是为了服务业务，三个方案经过分析得出结论：
1.第一个方案仅限于视觉层面，排版布局，信息整合
2.第二个方案的设计凸显了权益和会员开通的信息，但是没有考虑到用户心理对开通会员这件事的接受程度
3.第三个方案，缓解了用户对于开通会员这件事的焦虑心理，通过限时优惠券等信息引导下单转化
推荐阅读
你「在看」是最好的肯定与鼓励